<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>利用jQuery去动态修改样式</title>
		<!-- 引入jQuery工具包，相对路径 -->
		<script src="js/jquery.min.js"></script>
	</head>
	<body>
		<div id="msg">使用jQuery来实现div中的字体变大、变色</div>
		<button id="pay">支付宝支付</button>
		
		
		
		<!-- 页面上可以有很多组选择，怎么知道是一组呢？id必须相同 -->
		
		<div>
			<input type="checkbox" id="ck"/>红色
			<input type="checkbox" id="ck"/>绿色
			<input type="checkbox" id="ck"/>蓝色
			
			<button id="selectAll">全选</button>
			<button id="unselectAll">取消</button>
		</div>
	</body>
	<script>
		//jQuery的ready事件
		$().ready(function(){
			//获取div对象，设置css样式，改变字体大				小、颜色
			$("#msg").css("font-size",36);//
			$("#msg").css("color","red");
			
			
			
			//给按钮绑定一个事件onclick
			$("#pay").click(function(){
				//禁止按钮：html属性：disabled true禁止，false可以点击
				$("#pay").prop("disabled",true);//属性方法
			});
			
			//实现全选，jQuery选择器[]，过滤出我想要的元素，[id标签的id=ck（id给定的名称）]
			//jQuery可以针对一组值进行设定，动态绑定click事件
			$("#selectAll").click(function(){
							$("[id=ck]").prop("checked",true);//所有ck框全选中
			})		
			$("#unselectAll").click(function(){
							$("[id=ck]").prop("checked",false);//所有ck框全取消
			})
			
			

			
			
			})
			

		
	</script>
</html>
